<template>
  <div class="activity">
    <Header />
    <div class="g-box">
      <div class="activity__banner">
        <h2>Activity</h2>
        <p>Buy and Sell NFTs on BNB Smart Chain</p>
      </div>
      <div class="activity__list list">
        <div class="list__head">
          <div class="row">
            <div class="td">
              <span>ITEM</span>
            </div>
            <div class="td">
              <span>PRICE</span>
            </div>
            <div class="td">
              <span>FROM</span>
            </div>
            <div class="td">
              <span>TO</span>
            </div>
            <div class="td">
              <span>DATE</span>
            </div>
          </div>
        </div>
        <div class="list__body">
          <div class="row" v-for="(item, i) in list" :key="i">
            <div class="td name">
              <div class="icon">
                <img :src="item.image" />
              </div>
              <div class="info">
                <span class="collections">{{ item.name }}</span>
                <span class="id"
                  >{{ item.name }} #{{ item.token_id }}</span
                >
              </div>
            </div>
            <div class="td">
              <span>{{ item.price }}</span>
              <span>(~${{ item.priceUsd }})</span>
            </div>
            <div class="td">
              <span>{{ item.sender | formatAccount }}</span>
            </div>
            <div class="td">
              <span>{{ item.address | formatAccount }}</span>
            </div>
            <div class="td date">
              <span>{{ item.create_at }}</span>
              <a
                :href="`https://bscscan.com/tx/${item.tx_hash}`"
                target="_blank"
              >
                <i class="iconfont icon-share"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import { getNFTAll, getTokenPriceSingle } from "@/api/core";

export default {
  components: {
    Header,
  },
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.loadNFT();
  },
  methods: {
    async loadNFT() {
      const list = await getNFTAll();
      const usd = await getTokenPriceSingle("BNB");
      this.list = list.map((item) => {
        item.metadata = JSON.parse(item.metadata);
        item.name = item.metadata.name;
        item.price = (+item.price).toFixed(2);
        item.priceUsd = (item.price * usd).toFixed(2);
        return item;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.activity {
  padding: 120px 0 60px;

  &__banner {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    margin: 30px 0 60px;

    h2 {
      font-size: 36px;
      font-family: "Roboto Black";
      color: var(--color);
      margin-bottom: 20px;
    }
    p {
      font-size: 16px;
      font-family: "Roboto Medium";
      color: var(--color-content);
      line-height: 1.5;
    }
  }

  .list {
    .row {
      height: 42px;
      display: grid;
      align-items: center;
      grid-gap: 10px;
      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;

      .td {
        span {
          font-size: 14px;
          font-family: "Roboto Regular";
        }

        &:last-child {
          text-align: right;
        }

        &.name {
          display: flex;
          align-items: center;

          .icon {
            margin-right: 10px;
            img {
              width: 50px;
              height: 50px;
              border-radius: 25px;
            }
          }

          .info {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            .collections {
              font-size: 12px;
              color: var(--color-content);
              margin-bottom: 5px;
            }
          }
        }

        &.date {
          a {
            color: var(--color);
            text-decoration: none;
          }
          .iconfont {
            font-size: 20px;
            margin-left: 5px;
          }
        }
      }
    }

    &__head {
      .row {
        .td {
          span {
            color: var(--color-content);
          }
        }
      }
    }

    &__body {
      .row {
        height: 86px;
      }
    }
  }
}
</style>
